<script setup>
import { computed } from 'vue'
import { RouterLink, useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const current = computed(() => [route.path])
const handleClick = ({ key }) => {
  router.push(key)
}
const items = [
  {
    key: '/index',
    label: '首页'
  },
  {
    key: '/levels',
    label: '关卡'
  },
  {
    key: '/playground',
    label: '广场'
  }
]
</script>

<template>
  <div id="app">
    <!-- header -->
    <a-row class="header" type="flex" align="middle">
      <a-col flex="160px" style="margin: 0 auto">
        <RouterLink to="/index">
          <a-row align="middle">
            <img
              src="./assets/mysql.gif"
              alt="MySQL自学网站"
              class="logo"
              title="MySQL自学网站"
            />
          </a-row>
        </RouterLink>
      </a-col>
      <a-col flex="auto">
        <a-menu
          v-model:selectedKeys="current"
          mode="horizontal"
          :items="items"
          @click="handleClick"
        />
        <!-- <a-menu-item key="/index">首页</a-menu-item>
          <a-menu-item key="/levels">关卡</a-menu-item>
          <a-menu-item key="/playground">广场</a-menu-item>
        </a-menu> -->
      </a-col>
    </a-row>
    <!-- content -->
    <div class="content">
      <router-view />
    </div>
    <!-- footer -->
    <div class="footer">
      MySQL 闯关网站 ©2023 by
      <a href="https://gitee.com/wan-jie7500/sql-study.git">fighting7500</a><br>
      <a href="https://beian.miit.gov.cn" target="_blank">滇ICP备2023015126号</a>
    </div>
    <a-back-top :style="{ right: '24px' }" />
  </div>
</template>

<style scoped>
.header {
  border-bottom: 1px solid #f0f0f0;
  padding: 0 24px;
}

.ant-menu-horizontal {
  border-bottom: none !important;
}

.logo {
  width: 130px;
}

.title {
  margin-left: 8px;
  font-size: 20px;
  color: #000;
}

.content {
  padding: 24px;
}

.footer {
  padding: 12px;
  text-align: center;
  background: #efefef;
}
a{
  text-decoration: none;
}
</style>
